<template>
  <view class="page">
    <u-form class="form" :model="model" :rules="rules" ref="uForm" label-position="left">
      <u-form-item label="组名" prop="title" label-width="180" required>
        <u-input placeholder="请输入组名" v-model="model.groupName" type="text" maxlength="64"
          :disabled="disabled"></u-input>
      </u-form-item>
      <u-form-item label="创建时间" prop="createTime" label-width="180" v-if="model.createTime!=null">
        {{model.createTime}}
      </u-form-item>
    </u-form>
    <view v-if="!disabled" class="page-footer">
      <view class="button" @click="submit">保存</view>
      <view class="button" @click="cancel">取消</view>
    </view>
    <view v-else class="page-footer">
      <view v-if="hasPermission('msgGroupUser_edit')" class="button" @click="disabled=false">编辑</view>
      <view v-if="hasPermission('msgGroupUser_delete')" class="button" @click="handleDelete">删除</view>
    </view>
    <!-- <view class="footer">
      <view v-if="!disabled" style="display: flex;flex-direction: row;">
        <u-button class="btn" style="width: 50%;margin-right: 10rpx;" type="primary" @click="submit">保存</u-button>
        <u-button class="btn" style="width: 50%;" @click="cancel">取消</u-button>
      </view>
      <view v-else style="display: flex;flex-direction: row;">
        <u-button class="btn" style="width: 50%;margin-right: 10rpx;" type="primary"
          v-if="hasPermission('msgGroupUser_edit')" @click="disabled=false">编辑</u-button>
        <u-button class="btn" style="width: 50%;" type="error" v-if="hasPermission('msgGroupUser_delete')"
          @click="handleDelete">删除</u-button>
      </view>
    </view> -->
  </view>
</template>
<script>
  /**
   * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
   */
  export default {
    data() {
      return {
        model: {
          id: '',
          groupName: ''
        },
        show: false,
        disabled: true,
        rules: {
          groupName: [{
            required: true,
            message: '请输入组名',
            trigger: ['change', 'blur'],
          }]
        },
      };
    },
    onLoad(params) {
      if (params.id) {
        this.$u.api.message.msgGroup.detail({
          id: params.id
        }).then(res => {
          Object.assign(this.model, res.data);
        });
      } else {
        this.disabled = false;
      }
    },
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    },
    methods: {
      submit() {
        this.$refs.uForm.validate(valid => {
          if (valid) {
            uni.showLoading({
              title: '提交中....'
            })
            this.$u.api.message.msgGroup.save(this.model).then(res => {
              uni.hideLoading();
              uni.showModal({
                title: '提示',
                content: res.msg,
                showCancel: false,
                success: function() {
                  if (res.code == 200) {
                    uni.navigateTo({
                      url: 'index'
                    });
                  }
                }
              });
            });
          } else {
            this.$u.toast('您填写的信息有误，请根据提示修正。');
          }
        });
      },
      cancel() {
        uni.navigateTo({
          url: 'index'
        });
      },
      handleDelete() {
        let self = this;
        uni.showModal({
          title: '提示',
          content: '确认要删除组吗,删除后组内用户也将删除？',
          showCancel: true,
          success: function(res2) {
            if (res2.confirm) {
              self.$u.api.message.msgGroup.delete({
                ids: self.model.id
              }).then(res => {
                uni.navigateTo({
                  url: 'index'
                });
              });
            }
          }
        });
      },
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    height: 100vh;
    background: #f7f7f7;
  }

  .page-footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    padding: 24rpx;
    background: #f7f7f7;

    .button {
      flex: 1;
      height: 96rpx;
      border-radius: 96rpx;
      line-height: 96rpx;
      text-align: center;
      font-size: 32rpx;
      font-weight: 500;
      color: #fff;
      background: #3989FC;

      &+.button {
        margin-left: 24rpx;
        color: #333;
        background: #fff;
      }
    }
  }

  .form {
    padding: 32rpx 24rpx;
  }

  .u-item-title {
    position: relative;
    margin-bottom: 32rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #333;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -24rpx;
      display: inline-block;
      width: 4rpx;
      height: 40rpx;
      border-radius: 0px 6rpx 6rpx 0px;
      background-color: #3989FC;
    }
  }

  .u-form-item {
    padding: 16rpx 32rpx;
    border-radius: 8rpx;
    margin-bottom: 24rpx;
    background: #fff;

    &::after {
      display: none;
    }
  }
</style>